---
type: tutorial
title: Construa você mesmo - Cabeçalho
description: >-
  Tutorial: Construa seu primeiro blog Astro —
  Use tudo o que você aprendeu até agora para construir um cabeçalho com
  navegação responsiva
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';


Já que o seu site será visto em diferentes dispositivos, é hora de criar uma navegação entre páginas que responde a múltiplos tamanhos de tela!

<PreCheck>
  - Criar um Cabeçalho para o seu site que contém o componente de Navegação
  - Fazer o componente de Navegação responsivo
</PreCheck>


<Box icon="puzzle-piece">

## Tente você mesmo - Construa um novo componente de Cabeçalho

1. Crie um novo componente de Cabeçalho. Importe e utilize seu componente `Navigation.astro` existente dentro de um elemento `<nav>` que está dentro de um elemento `<header>`.

    <details>
    <summary>Me mostre o código!</summary>

    Crie um arquivo chamado `Header.astro` em `src/components/`
    ```astro title="src/components/Header.astro"
    ---
    import Navigation from './Navigation.astro';
    ---
    <header>
      <nav>
        <Navigation />
      </nav>
    </header>
    ```

    </details>

</Box>




<Box icon="puzzle-piece">

## Tente você mesmo - Atualize suas páginas

1. Em cada página, substitua seu componente `<Navigation/>` existente com o seu novo cabeçalho.

    <details>
    <summary>Me mostre o código!</summary>

    ```astro title="src/pages/index.astro" ins={3,18} del={2,17}
    ---
    import Navigation from '../components/Navigation.astro';
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "Página Inicial";
    ---
    <html lang="pt-BR">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{pageTitle}</title>
      </head>
      <body>
        <Navigation />
        <Header />
        <h1>{pageTitle}</h1>
        <Footer />
      </body>
    </html>
    ```
    </details>

2. Verifique a pré-visualização do seu navegador e verifique que o seu cabeçalho é mostrado em todas as páginas. Ele não se parecerá diferente ainda, mas se você inspecionar sua pré-visualização utilizando ferramentas de desenvolvimento, você irá ver que agora você tem elementos como `<header>` e `<nav>` entre os seus links de navegação.

</Box>

## Adicione estilos responsivos

1. Atualize `Navigation.astro` com a classe CSS para controlar seus links de navegação. Envolva os links de navegação existentes em uma `<div>` com a classe `nav-links`.

    ```astro title="src/components/Navigation.astro" ins={3,7}
    ---
    ---
    <div class="nav-links">
      <a href="/">Início</a>
      <a href="/about">Sobre</a>
      <a href="/blog">Blog</a>
    </div>
    ```

2. Copie os estilos CSS abaixo em `global.css`. Esses estilos:

    - Estilizam e posicionam os links de navegação para dispositivos móveis
    - Incluem uma classe `expanded` que pode ser alternada para mostrar ou esconder os links em dispositivos móveis
    - Utilizam uma `@media` query para definir diferentes estilos em tamanhos de tela maiores

    :::tip[Design mobile-first]
    Comece definindo o que deve acontecer em tamanhos de tela menores primeiro! Tamanhos de tela menores demandam layouts mais simples. E então, ajuste seus estilos para acomodarem dispositivos maiores. Se você projetar para os casos mais complicados primeiro, você terá que trabalhar para tentar torná-lo simples novamente.
    :::

    ```css title="src/styles/global.css" ins={23-100}
    html {
      background-color: #f1f5f9;
      font-family: sans-serif;
    }

    body {
      margin: 0 auto;
      width: 100%;
      max-width: 80ch;
      padding: 1rem;
      line-height: 1.5;
    }

    * {
      box-sizing: border-box;
    }

    h1 {
      margin: 1rem 0;
      font-size: 2.5rem;
    }

    /* estilos da navegação */

    .nav-links {
      width: 100%;
      top: 5rem;
      left: 48px;
      background-color: #ff9776;
      display: none;
      margin: 0;
    }

    .nav-links a {
      display: block;
      text-align: center;
      padding: 10px 0;
      text-decoration: none;
      font-size: 1.2rem;
      font-weight: bold;
      text-transform: uppercase;
    }

    .nav-links a:hover,
    .nav-links a:focus {
      background-color: #ff9776;
    }

    .expanded {
      display: unset;
    }

    @media screen and (min-width: 636px) {
      .nav-links {
        margin-left: 5em;
        display: block;
        position: static;
        width: auto;
        background: none;
      }

      .nav-links a {
        display: inline-block;
        padding: 15px 20px;
      }

    }
    ```

Redimensione sua tela e veja os diferentes estilos sendo aplicados em diferentes larguras de tela. Seu cabeçalho agora é **responsivo** ao tamanho da tela através do uso de `@media` queries.



<Box icon="check-list">

## Checklist

<Checklist>
- [ ] Eu posso utilizar CSS para adicionar elementos responsivos ao meu site.
</Checklist>
</Box>

### Recursos

- [Design baseado em Componentes](https://www.droptica.com/blog/component-based-design/) <Badge>externo</Badge>

- [Tags HTML Semânticas](https://www.dofactory.com/html/semantics) <Badge>externo</Badge>

- [Design Mobile-first](https://www.mobileapps.com/blog/mobile-first-design) <Badge>externo</Badge>
